import { Form, Input, Button, Space, Checkbox, Radio, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { useState, useRef } from 'react'
const App = () => {
  const onFinish = values => {
    console.log('Received values of form:', myForm.current.getFieldValue());
  };
  // 函数组件如何定义状态
  const [checkList, setCheckList] = useState([])
  const [radioList, setRadioList] = useState([])
  const children = [];
  const { Option } = Select;
  for (let i = 10; i < 36; i++) {
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
  }

  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  const myForm = useRef()
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" ref={myForm}>
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return <>
            {fields.map(({ key, name, fieldKey, ...restField }, index) => (
              <Form.Item key={key} name="list">
                <Form.Item label="operationType" name="operationType">
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item>
                  <Form.Item name="auto">
                    <Checkbox
                      onChange={({ target: { checked } }) => {
                        checkList[index] = checked
                        setCheckList(JSON.parse(JSON.stringify(checkList)))
                      }}
                      checked={checkList[index]}
                    >自动生成测试数据</Checkbox>
                  </Form.Item>

                  {checkList[index] ? <></> : <Radio.Group onChange={({ target: { value } }) => {
                    radioList[index] = value
                    setRadioList(JSON.parse(JSON.stringify(radioList)))
                  }} value={radioList[index]}>
                    <Radio value={1}>A</Radio>
                    <Radio value={2}>B</Radio>
                    <Radio value={3}>C</Radio>
                  </Radio.Group>}
                </Form.Item>
                {radioList[index] === 1 ? <Form.Item label="responseFiled">
                  <button>添加数据</button>
                </Form.Item> : <></>}
                {radioList[index] === 2 ? <Form.Item label="数据类型">
                  <Select
                    mode="multiple"
                    allowClear
                    style={{ width: '100%' }}
                    placeholder="Please select"
                    defaultValue={['a10', 'c12']}
                    onChange={handleChange}
                  >
                    {children}
                  </Select>
                </Form.Item> : <></>}
                {radioList[index] === 3 ? <AddList></AddList>
                  : <></>}
              </Form.Item>
            ))}
            <Form.Item >
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                新增optionType
              </Button>
            </Form.Item>
          </>
        }}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
function AddList() {
  return <Form.List name="users">
    {(fields, { add, remove }) => {
      return <>
        {fields.map(({ key, name, fieldKey, ...restField }, index) => (
          <Form.Item key={key + '1'}>
            <Space align="baseline">
              <Form.Item
                label="测试字段"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="测试数据"
              >
                <Input />
              </Form.Item>
            </Space>
          </Form.Item>
        ))}
        <Form.Item >
          <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
            新增字段
          </Button>
        </Form.Item>
      </>
    }}
  </Form.List>
}
export default App;